<template>
  <ScalablePage>
    <div
      class="big-screen sbgl flex-between"
      style="width: 480px; overflow: hidden;"
    >
      <div class="screen-right">
        <div class="device-repair">
          <div class="screen-title-container-l1">
            <img
              src="@/assets/sbgl/screen-title03.png"
              alt=""
              class="screen-title"
            />
            <div class="screen-title-text-l1">更多</div>
          </div>
          <div class="repair-main flex-between">
            <div class="repair-chart" id="repairChart"></div>
          </div>
        </div>
        <div class="device-maintain">
          <div class="screen-title-container-l1">
            <img
              src="@/assets/sbgl/screen-title04.png"
              alt=""
              class="screen-title"
            />
            <div class="screen-title-text-l1">更多</div>
          </div>
          <div class="maintain-top flex-center">
            <div class="top-left">
              <div class="top-num">{{ shebeizongwanchenglv }}%</div>
              <div class="top-desc">近半年维护总完成率</div>
            </div>
            <div class="top-info">
              <div class="info-title">近半年维护总次数</div>
              <div class="info-value">{{ jinbannianweihucishu }} 次</div>
            </div>
          </div>
          <div class="maintain-title">
            {{ getCurrentDate("yyyy-MM") }}月设备维护信息
          </div>
          <div class="maintain-list flex-between">
            <div class="list-outer list-left">
              <div
                class="list-option"
                v-for="(item, index) in weiwancheng"
                :key="index"
                :class="{ active: item.value == '未完成' }"
              >
                {{ item.key }}：{{ item.value }}
              </div>
            </div>
            <div class="list-line"></div>
            <div class="list-outer list-right">
              <div
                class="list-option"
                v-for="(item, index) in yiwancheng"
                :key="index"
                :class="{ active: item.value == '未完成' }"
              >
                {{ item.key }}：{{ item.value }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </ScalablePage>
</template>

<script setup lang="ts">
import ScalablePage from "@/components/ScalablePage.vue";
import * as echarts from "echarts";
import { onMounted, ref, toRefs, reactive, watch, nextTick } from "vue";
import { getCurrentDate } from "@/utils/date";

import {
  waterApi,
  getYweixiuAPI,
  getDweixiuAPI,
  getYyanshouAPI,
  getYRenwuAPI,
  getEquipmentMaintainInfoAPI,
  getEquipmentMaintainRateAPI,
  getEquipmentMaintainCountAPI,
  getMonthRepairedAPI,
  getMonthPendingRepairAPI,
  getMonthAcceptedAPI,
  getMonthTaskAPI,
  getYearRepairedAPI,
  getYearPendingRepairAPI,
  getYearAcceptedAPI,
  getYearTaskAPI,
} from "@/utils/shuiwu/api";

const yuanShui = ref("");
const jingShui = ref("");
// 设备未完成数量
const weiwancheng = ref([]);
// 设备已完成数量
const yiwancheng = ref([]);
// 设备总完成率
const shebeizongwanchenglv = ref(100);

// 近半年维护总次数
const jinbannianweihucishu = ref(0);

// 今日设备维修数据
const state = reactive({
  djx: 0,
  ywx: 0,
  bh: 0,
  rw: 0,
});

// 本月设备维修数据
const state2 = reactive({
  djx: 0,
  ywx: 0,
  bh: 0,
  rw: 0,
});

// 本年设备维修数据
const state3 = reactive({
  djx: 0,
  ywx: 0,
  bh: 0,
  rw: 0,
});

watch(
  [
    () => state.djx,
    () => state.ywx,
    () => state.bh,
    () => state.rw,
    () => state2.djx,
    () => state2.ywx,
    () => state2.bh,
    () => state2.rw,
  ],
  () => {
    nextTick(() => {
      drawDeviceRepair(state.djx, state.ywx, state.bh, state.rw);
    });
  },
  { immediate: true }
);

onMounted(() => {
  shebeiGuanli();
  getYRenwu();
  deviceCompleteRate();
  equipmentMaintainCountAPI();
  // shebeiWeixiu();
});


//已维修
function getYweixiu() {
  // 今日
  getYweixiuAPI().then((res) => {
    console.log(res, "今日已维修");
    if (res.data.length !== 0) {
      state.ywx = Number(res.data.slice(-1)[0].value);
    }
  });

  // // 本月
  // getMonthRepairedAPI().then((res) => {
  //   console.log(res, "本月已维修");
  //   if (res.data.length !== 0) {
  //     state2.ywx = Number(res.data.slice(-1)[0].value);
  //   }
  // });

  // // 本年
  // getYearRepairedAPI().then((res) => {
  //   console.log(res, "本年已维修");
  //   if (res.data.length !== 0) {
  //     state3.ywx = Number(res.data.slice(-1)[0].value);
  //   }
  // });
}

/**
 * 待维修
 */
function getDweixiu() {
  // 今日
  getDweixiuAPI().then((res) => {
    console.log(res, "今日待维修");

    if (res.data.length !== 0) {
      state.djx = Number(res.data.slice(-1)[0].value);
    }
  });

  // // 本月
  // getMonthPendingRepairAPI().then((res) => {
  //   console.log(res, "本月待维修");
  //   if (res.data.length !== 0) {
  //     state2.djx = Number(res.data.slice(-1)[0].value);
  //   }
  // });

  // // 本年
  // getYearPendingRepairAPI().then((res) => {
  //   console.log(res, "本年待维修");
  //   if (res.data.length !== 0) {
  //     state3.djx = Number(res.data.slice(-1)[0].value);
  //   }
  // });
}

/**
 * 已验收
 */
function getYyanshou() {
  // 今日
  getYyanshouAPI().then((res) => {
    console.log(res, "今日已验收");
    if (res.data.length !== 0) {
      state.bh = Number(res.data.slice(-1)[0].value);
    }
  });

  // // 本月
  // getMonthAcceptedAPI().then((res) => {
  //   console.log(res, "本月已验收");
  //   if (res.data.length !== 0) {
  //     state2.bh = Number(res.data.slice(-1)[0].value);
  //   }
  // });

  // // 本年
  // getYearAcceptedAPI().then((res) => {
  //   console.log(res, "本年已验收");
  //   if (res.data.length !== 0) {
  //     state3.bh = Number(res.data.slice(-1)[0].value);
  //   }
  // });
}

/**
 * 维修任务
 */
function maintenanceTasks() {
  // 今日
  getYRenwuAPI().then((res) => {
    console.log(res, "今日维修任务");
    if (res.data.length !== 0) {
      state.rw = Number(res.data.slice(-1)[0].value);
    }
  });

  // // 本月
  // getMonthTaskAPI().then((res) => {
  //   console.log(res, "本月维修任务");
  //   if (res.data.length !== 0) {
  //     state2.rw = Number(res.data.slice(-1)[0].value);
  //   }
  // });

  // // 本年
  // getYearTaskAPI().then((res) => {
  //   console.log(res, "本年维修任务");
  //   if (res.data.length !== 0) {
  //     state3.rw = Number(res.data.slice(-1)[0].value);
  //   }
  // });
}

//设备维修任务
function getYRenwu() {
  getYweixiu();
  getDweixiu();
  getYyanshou();
  maintenanceTasks();
}

// 设备信息
function shebeiGuanli() {
  getEquipmentMaintainInfoAPI().then((res) => {
    if (res.data.length !== 0) {
      res.data.forEach((item: any) => {
        if (item.value === "已完成") {
          const { key, value } = item;
          const n = key.split("-");
          yiwancheng.value.push({
            key: n[0],
            value,
          });
        } else if (item.value === "未完成") {
          const { key, value } = item;
          const n = key.split("-");
          weiwancheng.value.push({
            key: n[0],
            value,
          });
        }
      });
    }
  });
}

// 设备完成率
function deviceCompleteRate() {
  getEquipmentMaintainRateAPI().then((res) => {
    if (res.data.length !== 0) {
      shebeizongwanchenglv.value =
        parseInt(res.data[0].value) === 0 ? 100 : parseInt(res.data[0].value);
    } else {
      shebeizongwanchenglv.value = 100;
    }
  });
}

// 获取近半年维护总次数
function equipmentMaintainCountAPI() {
  getEquipmentMaintainCountAPI().then((res) => {
    if (res.data.length !== 0) {
      jinbannianweihucishu.value = parseInt(res.data[0].value);
    } else {
      jinbannianweihucishu.value = 0;
    }
  });
}

// 设备维修
function drawDeviceRepair(djx: number, ywx: number, bh: number, rw: number) {
  const chartDom = document.getElementById("repairChart");
  const myChart = echarts.init(chartDom);
  const option = {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      // data: ["今日", "本月", "本年"],
      data: ["今日数据"],
      textStyle: {
        color: "#fff",
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["待维修", "设备维修任务", "已维修", "已验收"],
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
    },
    yAxis: {
      type: "value",
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
      splitLine: {
        lineStyle: {
          color: "#444",
        },
      },
    },
    color: ["#00d059", "#fffa92", "#13e7ff"],
    series: [
      {
        name: "今日数据",
        type: "line",
        data: [state.djx, state.rw, state.ywx, state.bh],
      },
      // {
      //   name: "本月",
      //   type: "line",
      //   data: [state2.djx, state2.rw, state2.ywx, state2.bh],
      // },
      // {
      //   name: "本年",
      //   type: "line",
      //   data: [state3.djx, state3.rw, state3.ywx, state3.bh],
      // },
    ],
  };

  myChart.setOption(option);
}

function shebeiWeixiu() {
  fetch("http://111.113.0.230:8066/orca/equipment/equipmentRepair/list")
    .then((r) => {
      if (r.status === 200) {
        return r.json();
      } else {
        return Promise.reject(r.json());
      }
    })
    .then((res) => {
      console.log(res);

      //  djx  ywx  bh
      let arr = res.result.records;
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].finishFlag == "djx") {
          state.djx += 1;
        }
        if (arr[i].finishFlag == "ywx") {
          state.ywx += 1;
        }
        if (arr[i].finishFlag == "bh") {
          state.bh += 1;
        }
      }
      let num = state.bh + state.djx + state.ywx;
      drawDeviceRepair(state.djx, state.ywx, state.bh, num);
    });
}
</script>
<style scoped lang="less">
@import url("../styles/sbgl.less");

.screen-title-container-l1 {
  position: relative;
  display: inline-block;
}

.screen-title-text-l1 {
  position: absolute;
  top: 36%;
  left: 57%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 20px;
  text-align: center;
  white-space: nowrap;
}

.left {
  /* background-color: #ccc; */
}

.just {
  width: 100%;
  display: flex;
  height: 160px;
}

#left1 {
  width: 160px;
}

.pump {
  flex: 1;
  height: 100%;
  position: relative;
}

.pump img {
  height: 136px;
  margin-top: 10px;
}

.pump .com-shui {
  position: absolute;
  font-size: 14px;
  height: 26px;
  padding-left: 50px;
  display: flex;
  justify-content: space-between;
  width: 185px;
}

.com-shui div {
  height: 100%;
  line-height: 26px;
  color: #fff;
}

.shuizhi1 {
  /* color: #35ccff; */
  top: 15px;
  height: 100%;
  line-height: 1;
}

.shuizhi2 {
  /* color: #00efff; */
  top: 64px;
}

.erji-con {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.erji-item {
  width: 238px;
  height: 80px;
  display: flex;
}

.erji-item .img-icon {
}

.erji-item-txt {
  flex: 1;
}

.erji-jinshui {
  background: url(../assets/changcheng/bengbg.png) no-repeat;
  height: 21px;
  line-height: 21px;
  font-size: 14px;
  color: #fff;
  padding-left: 7px;
  margin-top: 15px;
}

.erji-data {
  font-family: DINAlternate, DINAlternate;
  font-weight: bold;
  font-size: 22px;
  color: #ffeda8;
  line-height: 26px;
  text-align: left;
  font-style: normal;
  margin-top: 8px;
}

.wanhao {
  display: flex;
  height: 40px;
  border: 1px solid blue;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 10px;
  color: #fdfeff;
  font-style: normal;
}

.wanhao-l {
  width: 160px;
  border: 1px solid blue;
}

.wanhao-r {
  flex: 1;
  border: 1px solid blue;
}

.wanhao-bg {
  background: url(../assets/changcheng/wanhaoicon.png) no-repeat;
}

.wanhao-font {
  font-family: DINAlternate, DINAlternate;
  font-weight: bold;
  font-size: 14px;
  color: #4dcdff;
  line-height: 14px;
  text-align: left;
  font-style: normal;
  margin-top: 5px;
}

.qushi {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 13px;
  color: #cae5ff;
  line-height: 18px;
  font-style: normal;
}

.qushitu {
  height: 150px;
  width: 100%;
  border: 1px solid red;
}

.shebeiweixiutu {
  height: 100%;
  border: 1px solid red;
  width: 194px;
}

.shuizhi3 {
  color: #24eacd;
  top: 114px;
}

.weixiu {
  display: flex;
  height: 178px;
}

.weixiu-item {
  flex: 1;
}

.goto {
  position: absolute;
  top: 0;
  left: 40px;
  height: 45px;
  width: 112px;
  border-bottom: 1px solid rgb(0, 0, 255);
}
</style>
